<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">
        <!-- 左边结束 -->
        <div class="main-dianli-bottomgg" id="style-1">
          <div class="main-wendu-kuai01" style="padding-top: 25px">
            <div class="dianli-peidian01">
              <div class="mainbg-tit diyige">
                <div class="biaoti">{{ equipdetail.cabinetName }}-温度</div>
                <div class="" style="color:#fff ;padding-top:2px">
                  <span v-if="equipdetail.status == '报警'" class="colred"
                    ><img src="../../../static/image/xiaobj.png"
                  /></span>
                  <span
                    v-else-if="equipdetail.status == '预警'"
                    class="chengsezi"
                    ><img src="../../../static/image/xiaobjcs.png"
                  /></span>
                  <span v-else
                    ><img src="../../../static/image/xiaobjls.png"
                  /></span>
                </div>
              </div>
              <div class="main-con bujv-con">
                <div class="bujv-con-zuo">
                  <div id="quxian1" style="width:100%;height:100%"></div>
                </div>
                <div class="bujv-con-zuo">
                  <div class="wendu-conmid">
                    <span>预警温度</span
                    ><span class="chengsezi"
                      >{{ equipdetail.early_warn_value }}℃</span
                    ><span>报警温度</span
                    ><span class="colred">{{ equipdetail.warn_value }}℃</span>
                  </div>
                  <div class="jian-ggg">
                    <table>
                      <tr>
                        <th width="25%"></th>
                        <th class="lanseziti chengsezi">A相</th>
                        <th class="lanseziti green">B相</th>
                        <th class="lanseziti red">C相</th>
                      </tr>
                      <tr
                        v-for="(item, index) in equipdetail.data"
                        :key="index"
                        @click="qiehuan(item.gradation.gradationId)"
                      >
                        <td class="lansezi">{{ item.gradation.name }}</td>
                        <td class="chengsezi">{{ item.A }}</td>
                        <td class="green">{{ item.B }}</td>
                        <td class="red">{{ item.C }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="main-wendu-kuai02" style="padding-top: 25px">
            <div class=" dianli-peidian02">
              <div class="mainbg-tit diyige">
                <div class="biaoti">历史数据查询</div>
              </div>
              <div class="bujv02">
                <div class="gx-wen">位置：</div>
                <el-select
                  v-model="weizhi"
                  placeholder="选择点位"
                  class="maclass"
                  @change="qiehuan1"
                >
                  <el-option
                    v-for="item in weizhilist"
                    :key="item.gradationId"
                    :label="item.gradation"
                    :value="item.gradationId"
                  >
                  </el-option>
                </el-select>
                <div class="gx-wen">开始日期：</div>
                <el-date-picker
                  v-model="begintime"
                  type="date"
                  class="maclass1"
                  @change="begintimefun"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div class="gx-wen">结束日期：</div>
                <el-date-picker
                  v-model="endtime"
                  type="date"
                  class="maclass1"
                  @change="endtimefun"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  placeholder="选择日期"
                >
                </el-date-picker>
                <div class="gx-button" @click="comparefun">查询</div>
                <div class="gx-button shou" @click="daochufun">导出</div>
              </div>
              <div class="bujv-inh">
                <div id="quxian3" style="width:100%;height:100%"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 一组结束 -->

        <!-- 右边模块一 -->
      </div>
      <!-- 右边结束 -->
    </div>
  </div>
</template>
<script>
import { time } from "echarts";
import Top from "../../components/common/top.vue";
import exportExecl from "@/utils/export-excel.js";
export default {
  components: { Top },
  data() {
    return {
      baojing: 0, //不想
      pId: "",
      cabinetId: "",
      equipdetail: {},
      departList: [],
      currentIndex: "",

      weizhi: "",
      weizhilist: [],
      begintime: "",
      endtime: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      warnEquipList: [{ equip_nick_name: "设备", level: "warning" }],
      value1: ""
    };
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted() {
    this.roomsfun();
    this.cabinetdetailsfun();
    this.cabinetabcfun();
    this.gradationsfun();
    this.warningfun();
    this.tm2 = setInterval(() => {
      this.warningfun();
    }, 30000);
  },
  created() {
    console.log(this.$route.query);
    this.pId = this.$route.query.pId;
    this.cabinetId = this.$route.query.cabinetId;
    this.currentIndex = this.$route.query.currentIndex;
  },
  methods: {
    roomsfun() {
      this.loginLoading = true;
      this.$apiv
        .rooms({})
        .then(res => {
          this.departList = res.data;
          if (res.data.length > 0) {
            this.pId = res.data[0].deptId;
          }
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    warningfun() {
      this.loginLoading = true;
      this.$apiv
        .warning({})
        .then(res => {
          console.log("ggg", res.data);
          if (res.data.is_ok == true) {
            this.baojing = 1;
          } else {
            this.baojing = 0;
          }
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    cabinetdetailsfun() {
      this.loginLoading = true;
      this.$apiv
        .cabinetdetails({ cabinetId: this.cabinetId })
        .then(res => {
          this.equipdetail = res.data;
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    cabinetabcfun() {
      this.loginLoading = true;
      this.$apiv
        .cabinetabc({ cabinetId: this.cabinetId })
        .then(res => {
          let zhongjian = res.data.y_bar;
          let time = res.data.x_bar.map(element => {
            return (element = element + "相");
          });
          let shujv = [];
          let tuli = [];
          zhongjian.forEach(element => {
            tuli.push(element.gradation);
            shujv.push({
              name: element.gradation,
              type: "bar",
              data: element.value,
              barWidth: 20,
              itemStyle: {
                normal: {
                  barBorderRadius: [10, 10, 0, 0]
                }
              }
            });
          });
          this.$nextTick(() => {
            this.quxianEcharts(shujv, time, tuli);
          });
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    qiehuan(e) {
      console.log(e);
      this.weizhi = e;
      this.comparefun();
    },
    qiehuan1(e) {
      console.log(e);
      this.weizhi = e;
    },
    gradationsfun() {
      this.loginLoading = true;
      this.$apiv
        .gradations({ cabinetId: this.cabinetId })
        .then(res => {
          this.weizhilist = res.data;
          if (res.data.length > 0) {
            this.weizhi = res.data[0].gradationId;
          } else {
            this.weizhi = "";
          }
          this.comparefun();
          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },
    comparefun() {
      this.loginLoading = true;
      this.$apiv
        .compare({
          cabinetId: this.cabinetId,
          gradationId: this.weizhi,
          startTime: this.begintime,
          endTime: this.endtime
        })
        .then(res => {
          console.log(res.data);
          let time = [];
          let shujv = [];
          let tuli = [];
          if (res.data.code == 4000) {
            time = [];
            shujv = [];
            tuli = [];
          } else {
            time = res.data.x_bar;
            let zhongjian = res.data.y_bar;
            // let color = ['#ffa00b', 'green','#6c50f3']
            zhongjian.forEach((item, index) => {
              tuli.push(item.name);
              shujv.push({
                name: item.name,
                type: "line",
                smooth: true, //是否平滑
                data: item.value
              });
            });
          }

          this.$nextTick(() => {
            this.quxianEchart3(shujv, time, tuli);
          });

          this.loginLoading = false;
        })
        .catch(res => {
          this.loginLoading = false;
        });
    },

    begintimefun(e) {
      this.begintime = e;
    },
    endtimefun(e) {
      console.log(e);
      let kaishi = new Date(this.begintime).getTime();
      let jieshu = new Date(e).getTime();
      console.log("开始", kaishi);
      console.log("结束", jieshu);
      if (kaishi > jieshu) {
        this.$alert("结束时间不能小于开始时间，请重新选择结束时间", "", {
          confirmButtonText: "确定"
        });
        this.endtime = "";
      } else {
        this.endtime = e;
      }
      // this.endtime = e
    },

    goDepartEquip(index, id) {
      this.currentIndex = index;
      this.pId = id;
      this.$router.push({
        path: "/ele",
        query: {
          pId: this.pId,
          currentIndex: this.currentIndex
        }
      });
    },
    quxianEchart3(shujv, time, tuli) {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("quxian3"));
      let option = {
        color: ["#ffa00b", "green", "#6c50f3"],
        legend: {
          itemWidth: 16,
          itemHeight: 8,
          itemGap: 16,
          textStyle: {
            color: "#A3E2F4",
            fontSize: 12,
            fontWeight: 0
          },
          data: tuli
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)"
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)"
                  }
                ],
                global: false
              }
            }
          }
        },
        grid: {
          top: "20px",
          left: "40px",
          right: "20px",
          bottom: "20px"
          // containLabel: true
        },
        dataZoom: [
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100
          }
        ],
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00"
              }
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3" // 坐标值的具体的颜色
              }
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: time
          }
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#1caef6"
              }
            },

            splitLine: {
              //网格线
              lineStyle: {
                type: "solid", //设置网格线类型 dotted：虚线   solid:实线
                color: "rgba(255, 255, 255, 0.1)"
              },
              show: true //隐藏或显示
            },
            axisLabel: {
              textStyle: {
                fontFamily: "ArialMT",
                fontSize: "12",
                color: "#86A5C3" // 坐标值的具体的颜色
              }
            }
          }
        ],
        series: shujv
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    quxianEcharts(shujv, time, tuli) {
      let echarts = require("echarts");
      let myChart = echarts.init(document.getElementById("quxian1"));
      let option = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          top: "12%",
          left: "5%",
          bottom: "5%",
          right: "10%",
          containLabel: true
        },
        legend: {
          data: tuli,
          icon: "circle",
          left: "center",
          top: "3%",
          itemHeight: 12,
          textStyle: {
            fontSize: 12, //字体大小
            color: "#ffffff" //字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            data: time,
            axisLabel: {
              //x轴文字的配置
              color: "rgba(255,255,255,.7)",
              fontSize: "12"
            },
            axisLine: {
              //x轴颜色以及宽度
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,.5)",
                width: 1,
                type: "solid"
              }
            },
            axisTick: {
              show: false
            }
            // splitLine:{//分割线颜色
            //     show:false,
            //     lineStyle:{
            //       color:'gray',
            //     }
            // }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              //y轴文字的配置
              color: "rgba(255,255,255,.7)",
              fontSize: "12"
            },
            splitLine: {
              //分割线颜色
              show: true,
              lineStyle: {
                color: "rgba(169,169,169,0.7)",
                width: 0.3
              }
            },
            axisLine: {
              //x轴颜色以及宽度
              show: true,
              lineStyle: {
                color: "rgba(105,105,105,0.9)",
                width: 1,
                type: "solid"
              }
            }
          }
        ],
        series: shujv
        // [
        //   {
        //     name: "上",
        //     type: "bar",
        //     data: [20, 25, 40],
        //      barWidth : 20, //柱图宽度
        //     itemStyle: {
        //       normal: {
        //         //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
        //         barBorderRadius: [10, 10, 0, 0],
        //       },
        //     },
        //   },
        //   {
        //     name: "中",
        //     type: "bar",
        //      barWidth : 20, //柱图宽度
        //     data: [50, 55, 20],
        //     itemStyle: {
        //       normal: {
        //         barBorderRadius: [10, 10, 0, 0],
        //       },
        //     },
        //   },
        //   {
        //     name: "下",
        //     type: "bar",
        //      barWidth : 20, //柱图宽度
        //     data: [0, 0, 9.0],
        //     itemStyle: {
        //       normal: {
        //         //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
        //         barBorderRadius: [10, 10, 0, 0],
        //       },
        //     },
        //   },
        // ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    daochufun(){ 
      console.log("进入函数")
      const loading = this.$loading({
       lock:true,
       text:'正在导出，请稍后...',
       spinner:'el-icon-loading',
       background:'rgba(0,0,0,0.7)'
      })
      console.log("点击导出按钮了吗");
       this.$apiv.daochuhuanjing({deptId:15,startTime:'2023-11-14 00:00:00',endTime:'2024-11-16 00:00:00'}).then(res => {
          console.log("1111111111111", res);
          this.data = res.data;
          //导出示例
          this.keydata = [
            { header: "配电站", key: "desc", width: 20 },
            { header: "传感器", key: "device_name", width: 15 },
            { header: "值", key: "value", width: 15 },
            { header: "预警值", key: "early_warn", width: 20 },
            { header: "报警值", key: "warn", width: 20 },
            { header: "状态", key: "status", width: 20 },
            { header: "传感器类型", key: "type", width: 20 },
            { header: "时间", key: "time", width: 20 },
          ];
          this.sendData = [];
          this.data.forEach(item => {
            item.value_time.forEach(value=>{
              this.sendData.push({
              device_name: item.cabinetName,
              value: value.value,
              desc: item.deptName,
              time: value.time,
              type: value.gradation,
              status: item.status,
              early_warn: item.early_warn_value,
              warn: item.warn_value
            });
            })
            
          });
          //数据量大建议使用for
          let tableName = "环境检测报警数据统计";
          let fileName = "环境检测数据";
          // const charts=this.$refs.chart.$el
          // let baseCanvas = document.getElementById("zhexianceshi").firstChild;
          let baseCanvas = document.getElementsByTagName('canvas')[0];
          console.log("baseCanvas", (baseCanvas instanceof HTMLCanvasElement));
          exportExecl(
            this.sendData,
            this.keydata,
            tableName,
            fileName,
            baseCanvas,
            6,
            1
          );
          loading.close()
          // this.loginLoading = false;
        })
        .catch(res => {
          loading.close()
          console.log("报警历史记录error", res);
        });
   },
  }
};
</script>

<style scoped lang="scss">
@import url("../../../static/zhuti.css");
.maclass {
  margin-left: 3px;
  width: 130px;
  /deep/.el-input--suffix .el-input__inner {
    padding-right: 100px;
  }
  /deep/ .el-input__inner {
    background: transparent;
    color: #fff;
    height: 38px;
    border: 1px solid #35bccf;
  }
}
.maclass1 {
  margin-left: 3px;
  width: 130px;
  /deep/.el-input--suffix .el-input__inner {
    padding-right: 10px;
  }
  /deep/ .el-input__inner {
    background: transparent;
    color: #fff;
    height: 38px;
    border: 1px solid #35bccf;
  }
}
</style>
